<template>
	<view class="text-white">
		<cu-custom bgColor="nav-bg-blue" :isBack="true">
			<block slot="content"> 
				{{title}}
			</block>
		</cu-custom>
		<scroll-view class="sw-chat-view" :scroll-top="scrollTop">
			<block v-for="(item,index) of chatList" :key="index">
				<view class="sw-left-chat" v-if="item.type == 1">
					<image src="../../static/logo.png"></image>
					<view class="chat-right">
						<view class="chat-name">机器人</view>
						<view class="chat-content">{{item.content}}</view>
					</view>
				</view>
				<view class="sw-right-chat" v-else>
					<view class="chat-left">
						<view class="chat-name">
							<open-data type="userNickName"></open-data>
						</view>
						<view class="chat-content">{{item.content}}</view>
					</view>
					<view class="image">
						<open-data type="userAvatarUrl"></open-data>
					</view>
				</view>
			</block>
		</scroll-view>
		<view class="cu-tabbar-height"></view>
		<view class="sw-chat-bottom">
			<input placeholder="点此输入问题" placeholder-class="sw-input-placehoder" v-model="search" confirm-type="send" @confirm="toSearch" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title : '',
				search: '',
				scrollTop: 0,
				chatList: [
					{
						type:1,
						name:'',
						content:'亲，请问有什么可以帮您？'
					}
				]
			}
		},
		onLoad(option) {
			this.title = option.title
			this.scrollToBottom()
		},
		methods: {
			toSearch(){
				let that = this
				if(this.search){
					let search = this.search
					this.chatList.push({
						type: 2,
						name: '用户',
						content: search
					})
					this.search = ''
					uni.request({
						url: 'http://api.qingyunke.com/api.php?key=free&appid=0&msg='+search,
						method:'GET',
						success(res) {
							console.log(res.data)
							if(res.data.result == 0){
								that.chatList.push({
									type:1,
									name:'',
									content:res.data.content
								})
								that.scrollToBottom()
							}
						}
					})
				}
			},
			scrollToBottom() {
				let that = this;
				let query = uni.createSelectorQuery();
				query.select('.cu-tabbar-height').boundingClientRect((data)=>{
					console.log(data)
					console.log(that)
					that.scrollTop = data.top
				}).exec()
			}
		}
	}
</script>

<style>
.sw-left-chat{
	
}
.sw-left-chat image{
	width: 70rpx;
	height: 70rpx;
	-webkit-border-radius: 24px;
	border-radius: 50rpx;
	float: left;
	margin: 20rpx;
}
.sw-left-chat .chat-right{
	width: calc(100vw-100rpx);
	color: #999999 !important;
	margin: 15rpx;
	padding-top: 25rpx;
}
.sw-left-chat .chat-right .chat-name{
	font-size: 26rpx;
}
.sw-left-chat .chat-right .chat-content{
	background-color: #FFFFFF;
	color: #333333;
	margin: 15rpx 100rpx;
	padding: 25rpx;
	border-radius: 0 5rpx 5rpx 5rpx;
}
.sw-chat-bottom{
	height: 48px;
	background-color: #FFFFFF;
	width: 100vw;
	color: #333333;
	position: fixed;
	bottom: 0;
}
.sw-chat-bottom input{
	margin: 10rpx;
	-webkit-border-radius: 4px;
	border-radius: 80rpx;
	border: 1px solid #eeeeee;
	height: 85rpx;
}
.sw-input-placehoder{
	background-color: #EBEEF5;
	color: #999999;
	padding-left: 15rpx;
}
/*  */
.sw-right-chat{
	-webkit-box-pack: end;
	justify-content: flex-end;
	text-align: right;
	display: flex;
}
.sw-right-chat .chat-left{
	width: calc(100vw-100rpx);
	color: #999999 !important;
	margin: 15rpx;
	float: left;
}
.sw-right-chat .image{
	width: 70rpx;
	height: 70rpx;
	border-radius: 35rpx;
	margin-right: 20rpx;
}
.sw-right-chat .chat-left .chat-name{
	text-align: right;
}
.sw-right-chat .chat-left .chat-content{
	background-color: #FFFFFF;
	color: #333333;
	margin: 15rpx 0;
	padding: 25rpx;
	border-radius: 5rpx 0 5rpx 5rpx;
}
</style>
